<template>
    <div>
        <van-list v-model="loading" :finished="finished" finished-text="没有更多了" @load="onLoad" style="margin: 10px;">
            <van-cell v-for="item in tableData" :key="item" class="listItem"
                :to="'AndroidContingencyPlanOperation?ContingencyPlanNo=' + item.ryD_ContingencyPlanNo + '&Type=1'">
                <div class="title">
                    {{ item.ryD_ContingencyPlanTitle }}
                </div>
                <div class="explain">
                    <strong>说明：</strong>{{ item.ryD_ContingencyPlanExplain }}
                </div>
                <div class="createTime">
                    <strong>创建时间：</strong>{{ dateTimeSpan(item.ryD_CreateTime) }}
                </div>
                <div class="defaultUsers">
                    <strong>默认负责人：</strong><br />
                    <el-tag size="large" v-for="duser in item.ryD_DefaultUsers" :key="duser" type="info"
                        style="margin-right: 2px;">{{ duser.realName }}</el-tag>
                </div>
                <div class="createBy">
                    <strong>创建人：</strong>
                    <el-tag size="large" type="info">{{ item.ryD_CreateBy.realName }}</el-tag>
                </div>
                <div class="operation">
                    <el-button size="large" @click.stop color="#466ca3"
                        @click="announced(item.ryD_ContingencyPlanNo)">进行发布</el-button>
                </div>
            </van-cell>
        </van-list>
        <el-popover placement="bottom" title="新增应急方案" :width="200" :visible="false">
            <template #reference>
                <div class="add" @click="btnAddDemand">
                    <img src="@/assets/add.png" class="add-image" alt="">
                </div>
            </template>
        </el-popover>
        <van-overlay :show="loading">
            <div class="wrapper">
                <van-loading type="spinner" size="5vh" vertical color="#fff">加载中...</van-loading>
            </div>
        </van-overlay>
    </div>
</template>

<script setup>
import { inject, ref } from 'vue';
import axios from '@/utils/axios'
import dateTimeSpan from '@/utils/dateTime';
import router from '@/router';


let nav = inject('nav');
nav.showLeft = false;
nav.title = '应急预案管理';
nav.showRight = false;



const loading = ref(true);

const tableData = ref();


axios({
    method: 'get',
    url: "/api/GetContingencyPlanTable"
}).then(res => {
    tableData.value = res;
    loading.value = false;
})

let btnAddDemand = () => {
    router.push("AndroidContingencyPlanOperation");
}

const announced = (ryD_ContingencyPlanNo) => {

    router.push({
        name: 'AndroidContingencyPlanOperation',
        query: {
            ContingencyPlanNo: ryD_ContingencyPlanNo,
            Type: 2
        },
    });
}
</script>

<style scoped>
.listItem {
    margin-bottom: 10px;
    border: 1px solid rgb(221, 221, 221);
    border-radius: 10px;
}

.title {
    font-size: 1.5rem;
    line-height: 3rem;
    font-weight: bold;
}

.explain,
.createTime,
.defaultUsers,
.createBy {
    padding: 5px;
}

.operation {
    text-align: right;
}

.add {
    z-index: 10;
    width: 20vw;
    height: 20vw;
    position: fixed;
    bottom: 8vh;
    left: 40vw;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 100%;
    background-color: #353535;
    box-shadow: rgba(0, 0, 0, 0.3) 0 2px 10px;
}
</style>